<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">秒杀专区</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target +'public/imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <MyList2 :list="phoneList" :isMore="false"></MyList2>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 折上折商品展示区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">折上折</div>
            <!-- <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">电视影音</span>
              </MyMenu>
            </div> -->
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="zhesahangzheList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">今日必买</div>
            <!-- <div class="more" id="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
                <span slot="1">热门</span>
                <span slot="2">保护套</span>
                <span slot="3">充电器</span>
              </MyMenu>
            </div> -->
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt />
                </li>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="bimaiList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 秒杀商品列表


      zhesahangzheList: "", // 折上折商品列表
      bimaiList: "", //今日必买商品列表

     
    };
  },
  created() {
    // 获取轮播图数据
    this.$axios
      .post("/api/resources/carousel", {})
      .then(res => {
        this.carousel = res.data.carousel;
      })
      .catch(err => {
        return Promise.reject(err);
      });
this.getZheshangzheMsg();
this.getBimaiMsg();
this.getMiaoshaMsg();



  },
  methods: {
    // 获取折秒杀模块的数据status_id = 3
    getMiaoshaMsg() {
       request({
         url: "api/gaosheng/selectByStatus",
         params:{
          statusName: 3,
         },
         method: "get",
       })
         .then(res => {
         this.phoneList = res.data;
         this.phoneList=this.phoneList.slice(0,8);

         });
    },
    // 获取折上折模块的数据status_id = 1
    getZheshangzheMsg() {
       request({
         url: "api/gaosheng/selectByStatus",
         params:{
          statusName: 1,
         },
         method: "get",
       })
         .then(res => {
         this.zhesahangzheList = res.data;
         this.zhesahangzheList=this.zhesahangzheList.slice(0,7);

         });
    },
    // 获取必买模块的数据status_id = 2
    getBimaiMsg() {
       request({
         url: "api/gaosheng/selectByStatus",
         params:{
          statusName: 2,
         },
         method: "get",
       })
         .then(res => {
         this.bimaiList = res.data;
         this.bimaiList=this.bimaiList.slice(0,7);

         });
    },
  },



















  // created() {
  //   // 获取轮播图数据
  //   this.$axios
  //     .post("/api/resources/carousel", {})
  //     .then(res => {
  //       this.carousel = res.data.carousel;
  //     })
  //     .catch(err => {
  //       return Promise.reject(err);
  //     });



  //   // 获取各类商品数据
  //   this.getPromo("手机", "phoneList");
  //   this.getPromo("电视机", "miTvList");
  //   this.getPromo("保护套", "protectingShellList");
  //   this.getPromo("充电器", "chargerList");
  //   this.getPromo(
  //     ["电视机", "空调", "洗衣机"],
  //     "applianceList",
  //     "/api/product/getHotProduct"
  //   );
  //   this.getPromo(
  //     ["保护套", "保护膜", "充电器", "充电宝"],
  //     "accessoryList",
  //     "/api/product/getHotProduct"
  //   );
  // },
  // methods: {
  //   // 获取家电模块子组件传过来的数据
  //   getChildMsg(val) {
  //     this.applianceActive = val;
  //   },
  //   // 获取配件模块子组件传过来的数据
  //   getChildMsg2(val) {
  //     this.accessoryActive = val;
  //   },
  //   // 获取各类商品数据方法封装
  //   getPromo(categoryName, val, api) {
  //     api = api != undefined ? api : "/api/product/getPromoProduct";
  //     this.$axios
  //       .post(api, {
  //         categoryName
  //       })
  //       .then(res => {
  //         this[val] = res.data.Product;
  //       })
  //       .catch(err => {
  //         return Promise.reject(err);
  //       });
  //   }
  // }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>